<script lang="ts" setup>
import { ref } from "vue";
import { RouterView } from "vue-router";
defineOptions({
  name: "index",
});
//--================= Data

//--================= Methods

//--================= Other
</script>

<template>
  <div>
    <div class="top">Vue3 组件间的通信</div>
    <div class="content">
      <div class="left">
        <ul>
          <li>
            <router-link to="/Component_Communication/01_Props"
              >1.Props</router-link
            >
          </li>
          <li>
            <router-link to="/Component_Communication/02_自定义事件"
              >2.自定义事件</router-link
            >
          </li>
          <li>
            <router-link to="/Component_Communication/03_mitt"
              >3.mitt</router-link
            >
          </li>
          <li>
            <router-link to="/Component_Communication/04_v-model"
              >4.v-model</router-link
            >
          </li>
          <li><router-link to="">5.$attrs</router-link></li>
          <li><router-link to="">6.$refs, $parent</router-link></li>
          <li><router-link to="">7.pravide</router-link></li>
          <li><router-link to="">8.pinia</router-link></li>
          <li><router-link to="">9.slot</router-link></li>
        </ul>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style scoped>
.top {
  font-size: 30px;
  text-align: center;
  border: 1px solid #eee;
  height: 100px;
  margin-bottom: 10px;
  line-height: 100px;
}

.content {
  display: flex;
}

.left {
  width: 20%;
  height: 500px;
  border: 1px solid #eee;
  margin-right: 5px;
  text-shadow: 1px 1px #ccc;
  font-size: 15px;
}

.right {
  width: 70%;
  border: 1px solid #eee;
}

ul {
  list-style-type: none;
  /* 隐藏默认列表项标记 */
  padding: 0;
  margin: 0;
}

ul li {
  padding: 10px;
  margin: 1px;
  border: 1px solid #ccc;
  background-color: #fff;
}

ul li:hover {
  background-color: #f5f5f5;
}

a {
  /* Hide the default text decoration */
  text-decoration: none;

  /* Hide the default underline */
  text-underline: none;

  /* Hide the default link color */
  color: inherit;

  /* Remove default padding and margin */
  padding: 0;
  margin: 0;

  /* Remove default border */
  border: none;

  /* Remove default focus outline */
  outline: none;

  /* Reset any other default styles */
  display: inline-block;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  vertical-align: inherit;
}
</style>
